<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript">
	(function() {
		window.TypechoComment = {
			dom : function(id) {
				return document.getElementById(id);
			},
			create : function(tag, attr) {
				var el = document.createElement(tag);
				for ( var key in attr) {
					el.setAttribute(key, attr[key]);
				}
				return el;
			},
			reply : function(cid, coid) {
				var comment = this.dom(cid), parent = comment.parentNode, response = this
						.dom('respond-post-1'), input = this
						.dom('comment-parent'), form = 'form' == response.tagName ? response
						: response.getElementsByTagName('form')[0], textarea = response
						.getElementsByTagName('textarea')[0];

				var p_name = document.getElementById("author-" + cid).innerHTML;

				textarea.setAttribute('value', '@' + p_name);
				textarea.innerText = '@' + p_name + ':';

				/* alert(p_name); */

				if (null == input) {
					input = this.create('input', {
						'type' : 'hidden',
						'name' : 'parent',
						'id' : 'comment-parent'
					});
					form.appendChild(input);
				}
				input.setAttribute('value', coid);
				if (null == this.dom('comment-form-place-holder')) {
					var holder = this.create('div', {
						'id' : 'comment-form-place-holder'
					});
					response.parentNode.insertBefore(holder, response);
				}
				comment.appendChild(response);
				this.dom('cancel-comment-reply-link').style.display = '';
				if (null != textarea && 'text' == textarea.name) {
					/* textarea.setAttribute('value',); */
					textarea.focus();
				}
				return false;
			},
			cancelReply : function() {
				var response = this.dom('respond-post-1'), holder = this
						.dom('comment-form-place-holder'), input = this
						.dom('comment-parent');
				if (null != input) {
					input.parentNode.removeChild(input);
				}
				if (null == holder) {
					return true;
				}
				this.dom('cancel-comment-reply-link').style.display = 'none';
				holder.parentNode.insertBefore(response, holder);
				return false;
			}
		};
	})();
</script>
<div id="comments">
	<c:if test="${commentsNum == null}">
		<h3>暂无评论</h3>
	</c:if>
	<c:if test="${commentsNum != null}">
		<h3>已有 ${commentsNum} 条评论</h3>
	</c:if>
	<ol class="comment-list">
		<c:forEach var="comment" items="${comments}">
			<li itemscope itemtype="http://schema.org/UserComments"
				id="comment-${comment['coid']}"
				class="comment-body comment-parent comment-odd">
				<div class="comment-author" itemprop="creator" itemscope
					itemtype="http://schema.org/Person">
					<span itemprop="image"><img class="avatar"
						src="http://www.guxingke.com/image/user/default.jpg"
						alt="${comment['author']}" width="32" height="32" /></span> <cite
						class="fn" itemprop="name"><a
						id="author-comment-${comment['coid']}" href="${comment['url']}"
						rel="external nofollow">${comment['author']}</a></cite>
				</div>
				<div class="comment-meta">
					<a href="#comments-${comment['coid']}"> <time
							itemprop="commentTime" datetime="${comment['created']}"
							itemprop="datePublished">${comment['created']}</time>
					</a>
				</div>
				<div class="comment-content" itemprop="commentText">
					<p>${comment['text']}</p>
				</div>
				<div class="comment-reply">
					<a
						href="http://localhost/typecho/index.php/archives/1/?replyTo=1#respond-post-1"
						rel="nofollow"
						onclick="return TypechoComment.reply('comment-${comment['coid']}', ${comment['coid']});">回复</a>
				</div>

				<div class="comment-children" itemprop="discusses">
					<ol class="comment-list">
						<c:forEach var="chirld" items="${comment['children']}">
							<li itemscope itemtype="http://schema.org/UserComments"
								id="comment-${chirld['coid']}"
								class="comment-body comment-parent comment-odd">
								<div class="comment-author" itemprop="creator" itemscope
									itemtype="http://schema.org/Person">
									<span itemprop="image"><img class="avatar"
										src="http://www.guxingke.com/image/user/default.jpg"
										alt="${chirld['author']}" width="32" height="32" /></span> <cite
										class="fn" itemprop="name"><a
										id="author-comment-${chirld['coid']}" href="${chirld['url']}"
										rel="external nofollow">${chirld['author']}</a></cite>
								</div>
								<div class="comment-meta">
									<a href="#comments-${chirld['coid']}"> <time
											itemprop="commentTime" datetime="${chirld['created']}"
											itemprop="datePublished">${chirld['created']}</time>
									</a>
								</div>
								<div class="comment-content" itemprop="commentText">
									<p>${chirld['text']}</p>
								</div>
								<div class="comment-reply">
									<a href="#" rel="nofollow"
										onclick="return TypechoComment.reply('comment-${chirld['coid']}', ${comment['coid']});">回复</a>
								</div>
							</li>
						</c:forEach>
					</ol>
				</div>
			</li>
		</c:forEach>
	</ol>

	<div id="respond-post-1" class="respond">
		<div class="cancel-comment-reply">
			<a id="cancel-comment-reply-link" href="#respond-post-1"
				rel="nofollow" style="display: none"
				onclick="return TypechoComment.cancelReply();">取消回复</a>
		</div>

		<h3 id="response">添加新评论</h3>
		<form method="post" action="${options.siteUrl}/action?do=comment"
			id="comment-form" role="f orm">
			<c:if test="${user == null }">
				<p>
					<label for="author" class="required">称呼</label> <input type="text"
						name="comment.author" id="author" class="text" value=" " required />
				</p>
				<p>
					<label for="email" class="required">Email</label> <input
						type="email" name="comment.mail" id="mail" class="text" value=" "
						required />
				</p>
				<p>
					<label for="url">网站</label> <input type="url" name="comment.url"
						id="url" class="text" placeholder="http://" value="" />
				</p>
			</c:if>
			<c:if test="${user != null }">
				<p>当前登录用户：${user['screenName'] }</p>
				<input hidden="true" type="text" name="comment.author" id="author"
					class="text" value=" ${user['screenName'] }" required />
				<input hidden="true" type="email" name="comment.mail" id="mail"
					class="text" value=" ${user['mail'] }" required />
				<input hidden="true" type="url" name="comment.url" id="url"
					class="text" placeholder="http://" value=" ${user['url'] }" />
			</c:if>
			<p>
				<label for="textarea" class="required">内容</label>
				<textarea rows="8" cols="50" name="comment.text" id="textarea"
					class="textarea" required></textarea>
			</p>
			<p>
				<button type="submit" class="submit">提交评论</button>
			</p>
		</form>
	</div>
</div>